<template>
	<div class="interval_config">
		<div class="config_line">
			<div class="label">点击间隔：</div>
			<el-select v-model="intervalMode" class="config_input" @change="handleModeChange">
				<el-option label="高速模式(每秒10次)" value="high" />
				<el-option label="极速模式(每秒100次)" value="extreme" />
				<el-option label="自定义时间" value="custom" />
			</el-select>
		</div>
		<!-- 复合时间输入 -->
		<div v-show="intervalMode === 'custom'" class="config_line">
			<div class="label">自定义时间：</div>
			<time-input v-model="time" :min="min" :max="max" @update="handleTimeUpdate"/>
		</div>
	</div>
</template>
<script setup>
	import {
		ref,
		watch,
		computed
	} from 'vue'
	import timeInput from "@/components/timeInput.vue"

	const props = defineProps({
		modelValue: {
			type: Number,
			default: 100
		},
		min: {
			type: Number,
			default: 0,
		},
		max: {
			type: Number,
			default: -1,
		}
	})

	const emit = defineEmits(['update:modelValue', 'update'])

	// 使用ref初始化time
	const time = ref(props.modelValue)
	const intervalMode = ref(getInitialMode())

	// 增加初始化模式判断
	function getInitialMode() {
		const val = props.modelValue
		if (val === 10) return 'extreme'
		if (val === 100) return 'high'
		return 'custom'
	}

	const MODE_MAP = {
		high: 100,
		extreme: 10
	}

	// 修正处理模式切换的逻辑
	const handleModeChange = () => {
		if (intervalMode.value !== 'custom') {
			const value = MODE_MAP[intervalMode.value]
			time.value = value
			emit('update:modelValue', value)
		} else {
			// 切换到自定义模式时保持当前值
			emit('update:modelValue', time.value)
		}
		emit('update')
	}

	// 监听外部值变化
	watch(() => props.modelValue, (newTime) => {
		if (intervalMode.value === 'custom') {
			time.value = newTime
		} else {
			// 当外部值改变时自动匹配模式
			intervalMode.value = getInitialMode()
		}
	})

	// 对time的监听
	const handleTimeUpdate = () => {
		if (intervalMode.value === 'custom') {
			emit('update:modelValue', time.value)
			emit('update')
		}
	}
</script>

<style lang="less" scoped>
	@import url('../assets/main.less');

	.interval_config {

		.config_line {
			.config-line();

			.el-select {
				transition: all 0.3s;

				&:hover {
					box-shadow: 0 2px 8px rgba(@primary-color, 0.2);
				}
			}
		}
	}
</style>